﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" src="Json2.js"></script>
    <script type="text/javascript" src="JQuery.js"></script>
    <script type="text/javascript" src="ajaxCalls.js"></script>
    <style type="text/css">        
        body
        {
            background-color:rgb(251,213,181);
            margin:0;
            padding:0;
            text-align:center;
        }
        header
        {
            position:relative;
            border-color:rgb(181,109,49);
            background-color:rgb(246,149,69);
            border-style:solid;
            border-radius:4px;
            border-width:3px;
            margin-left:auto;
            margin-right:auto;
            margin-top:30px;
            width:900px;
            padding-top:10px;
            padding-bottom:10px;
        }
        footer
        {
            position:relative;
            border-color:rgb(181,109,49);
            background-color:rgb(246,149,69);
            border-style:solid;
            border-radius:4px;
            border-width:3px;
            margin-left:auto;
            margin-right:auto;
            margin-top:30px;
            width:900px;
            padding-top:10px;
            padding-bottom:10px;
        }
        h3, label
        {
            margin:0;
            color:White;
            font-size:larger
        }
        #content
        {
            position:relative;
            margin-left:auto;
            margin-right:auto;
            margin-top:30px;
            width:900px;
            padding:0;
        }
        section
        {
            position:relative;
            border-color:vlack;
            border-style:solid;
            border-width:3px;
            border-radius:14px;
            margin-left:0;
            width:585px; 
            height:600px;
        }
        aside
        {
            position:relative;
            float:right;
            margin-right:0;
            width:285px;             
        }        
        #channelslist
        {
            list-style-type:none;
            width:100%;
            margin:0;
            padding:0;
        }
        
        .selected
        {
            background-color:Aqua;            
        }
        #channelslist li:last div
        {
            border-bottom-width:0;
        }
        #channelslist li div
        {
            height:40px;
            border-bottom:4px solid black;
            padding:25px auto 5px auto;
        }
        #channelslist li div:hover
        {
            cursor:pointer;
            background-color:Aqua;
        }
        #channelslist li
        {
            color:White;
            height:35px;
            vertical-align:middle;
            display:inline;
            border-bottom-width: 2px;
            border-bottom-style: dashed;
            border-bottom-color: #a4c2e6;
        }
        #channelslist li:last-of-type
        {
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-width: 2px;
            border-bottom-style: dashed;
            border-bottom-color: #a4c2e6;
        }
        
        #channelsheader
        {
            background-color:rgb(128,100,162);
            border-top-left-radius:14px;
            border-top-right-radius:14px;
            border-width:3px;
            border-color:black;
            border-style:solid;
            padding-top:10px;
            padding-bottom:10px;            
        }
        #channels
        {
            height:200px;
            border-bottom-left-radius: 14px;
            border-bottom-right-radius: 14px;
            background-color:rgb(128,100,162);
            margin:0;
            overflow:auto;
            padding:0;
            border-width:3px;
            border-color:black;
            border-style:solid;
            border-top-width:0;
        }
        #chatheader
        {
            background-color:rgb(128,100,162);
            border-bottom-width:3px;
            border-bottom-style:solid;
            border-bottom-color:Black;
            border-top-left-radius:10px;
            border-top-right-radius:10px;
            padding-top:10px;
            padding-bottom:10px;
        }
        #chatpost
        {
            background-color:rgb(128,100,162);
            border-top-width:3px;
            border-top-style:solid;
            border-top-color:Black;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
            padding-top:10px;
            padding-bottom:10px;
            position:absolute;
            width:inherit;
            height:40px;
            bottom:0;
        }
        #posttextfield
        {
            border-radius:8px;
            width:300px;
            height:27px;
        }
        input[type="button"]
        {
            border-radius:8px;
            width:60px;
            height:27px;            
        }
        #resetbutton
        {
            border-radius:8px;
            width:inherit;
            height:40px;    
            margin-top:25px;        
        }
        #chatcontent
        {
            background-color:rgb(106,148,198);
            width:inherit;
            height:498px;
            color:White;
            text-align:left;
        }
        #chatcontent p
        {
            margin:0;
            padding-top:10px;
            padding-left:5px;   
        }
       
    </style>
</head>
<body>
<header><h3>Twitter Like Web Chat</h3></header>
<div id="content">
<aside>
    <div id="channelsheader"><h3>Channels</h3></div>
    <div id="channels">
        <ul id="channelslist"> 
        </ul>
    </div>
    <input type="button" name="resetmessages" value="Reset the channels" id="resetbutton" />
</aside>
<section>
    <div id="chatheader"><h3>Default Channel</h3></div>
    <div id="chatcontent"></div>
    <div id="chatpost">
        <label for="posttextfield">Post a message</label>
        <input type="text" id="posttextfield" name="postedmessage" />
        <input type="button" name="postbutton" value="post" id="postbutton" />
    </div>
</section>
</div>
<footer><h3>Telerik Academy 2011</h3></footer>
</body>
</html>
